<template>
  <el-container>
    <el-header height="30%">
      <div style="border-radius: 4px;" class="page-container">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="activeName">

            
            <!-- <div style="height:30%;width:90%">
              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>退货单号</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" value="TH1912260006416073"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>操作人员</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" value="merchant"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>创建日期</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" value="2019-12-26 13:42:21"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>退货日期</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-date-picker
                      style="width:200px"
                      type="date"
                      default-value="now()"
                      size="small"
                    ></el-date-picker>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right;">
                    <label>供应商</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" readonly="readonly" value="供应商" @focus="showSupplier"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>退货商家</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" readonly="readonly" disabled="disabled" value="张小二服饰"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>退货店铺</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" readonly="readonly" value="选择店铺名称" @focus="showStore"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right;">
                    <label>状态</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" type="data" disabled="disabled" value="待提交"></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>联系人名称</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right;">
                    <label>发货地址</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" type="data"></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货地址</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;">
                    <el-select size="mini" style="width:200px"></el-select>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>详细地址</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" style="width:200px"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>联系人电话</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" style="width:200px"></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>备注</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" type="textarea" style="width:200px"></el-input>
                  </div>
                </el-col>
              </el-row>
            </div>-->
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-header>
    <el-main>
      <div>
        <el-tabs>
          <el-tab-pane label="商品明细">
            <div class="search-button noboder mb20">
              <kt-button label="根据合同新增退货单" type="primary" @click="choseOrder" />
              <!-- <kt-button label="删除" type="primary" @click="delOrder" /> -->
            </div>
            <div>
              <el-table :data="products" border style="width: 100%">
                <el-table-column prop="productCode" label="商品编码" width="180"></el-table-column>
                <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="productSize" label="规格" width="180"></el-table-column>
                <el-table-column prop="productBarNo" label="商品条码" width="180"></el-table-column>
                <!-- <el-table-column prop="shoptype" label="商品类目" width="180"></el-table-column> -->
                <!-- <el-table-column prop="shopBrand" label="商品品牌" width="180"></el-table-column> -->
                <el-table-column prop="productUnit" label="采购单位" width="180"></el-table-column>
                <el-table-column prop="storeName" label="* 退货仓库	" width="180"></el-table-column>
                <el-table-column prop="realRecievedNum" label="可退数量" width="180"></el-table-column>
                <el-table-column prop="returnNum" label="本次采购退货数量" width="180">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.returnNum"
                      @blur="checkNumber(scope.row)"
                      placeholder="退货数量"
                    ></el-input>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="correctedquantity" label="交易币别" width="180"></el-table-column>
                <el-table-column prop="returnpurchase" label="汇率" width="180"></el-table-column>
                <el-table-column prop="untaxed" label="含税采购价" width="180"></el-table-column>
                <el-table-column prop="taxrate" label="税率(%)	" width="180"></el-table-column>
                <el-table-column prop="moneytype" label="未税采购价" width="180"></el-table-column>
                <el-table-column prop="exchangerate" label="含税金额" width="180"></el-table-column>
                <el-table-column prop="purchaseprice" label="税额" width="180"></el-table-column>
                <el-table-column prop="untaxedamount" label="未税金额" width="180"></el-table-column>
                <el-table-column prop="tax" label="本币未税成本价" width="180"></el-table-column>
                <el-table-column prop="amounttax" label="本币含税成本价" width="180"></el-table-column>
                <el-table-column prop="receiptmethod" label="本币含税金额" width="180"></el-table-column>
                <el-table-column prop="remark" label="本币税额" width="180"></el-table-column>
                <el-table-column prop="warehousepurchase" label="本币未税金额" width="180"></el-table-column>
                <el-table-column prop="purchaseno" label="采购单号" width="180"></el-table-column>
                <el-table-column prop="purchasealone" label="收货单号" width="180"></el-table-column>
                <el-table-column prop="asnno" label="合同属性" width="180"></el-table-column>
                <el-table-column prop="asnline" label="已开票数量" width="180"></el-table-column>
                <el-table-column prop="contractnumber" label="合同编码" width="180"></el-table-column>
                <el-table-column prop="contracttype" label="合同类型" width="180"></el-table-column>
                <el-table-column prop="attributes" label="合同属性" width="180"></el-table-column>-->
              </el-table>
            </div>
            <!-- <div style="margin-left:70%">
              <el-row :gutter="14">
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right">
                    <label>合计平品项数</label>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right;width:100%">
                    <span>0</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="14">
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right">
                    <label>合计含税金额</label>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right;width:100%">
                    <span>0.00</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="14">
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right">
                    <label>合计未税金额</label>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right;width:100%">
                    <span>0.00</span>
                  </div>
                </el-col>
              </el-row>
            </div>-->
          </el-tab-pane>
          <el-tab-pane label="操作日志">
            <div>
              <el-table :data="tableLog" border style="width: 100%">
                <el-table-column prop="operatingid" label="操作用户ID"></el-table-column>
                <el-table-column prop="operator" label="操作人"></el-table-column>
                <el-table-column prop="operating_time" label="操作时间"></el-table-column>
                <el-table-column prop="operating" label="操作"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <el-row style="text-align:center">
      <kt-button label="保存" type="primary" @click="saves" />
      <kt-button label="提交" type="primary" @click="saves" />
    </el-row>

    <!-- 选择店铺 -->
    <el-dialog
      title="选择店铺"
      :visible.sync="showModel"
      width="45%"
      height="100%"
      label-width="100px"
      label-position="right"
    >
      <el-form label-width="100px" label-position="left">
        <el-row>
          <div class="search-input">
            <el-form-item label="店铺名称" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>

            <el-form-item label="店铺编码" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>
          </div>
        </el-row>

        <div class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>

        <el-table :data="shopTable" border style="width: 100%" :visible.sync="showTable">
          <el-table-column prop="checks" type="selection"></el-table-column>
          <el-table-column prop="name" label="商家名称" width="280"></el-table-column>
          <el-table-column prop="number" label="店铺编码" width="280"></el-table-column>
          <el-table-column prop="shopname" label="店铺名称"></el-table-column>
          <el-table-column prop="type" label="店铺类型"></el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="cancels">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择供应商 -->

    <el-dialog
      title="选择供应商"
      :visible.sync="showSupplierModel"
      width="45%"
      height="100%"
      label-width="100px"
      label-position="right"
    >
      <el-form label-width="100px" label-position="left">
        <el-row>
          <div class="search-input">
            <el-form-item label="供应商编码：">
              <el-input auto-complete="off" width="20%" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="供应商名称：">
              <el-input auto-complete="off" width="20%" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </el-row>

        <div class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>

        <el-table
          :data="supplierTable"
          border
          style="width: 100%"
          :visible.sync="showSupplierTable"
        >
          <el-table-column prop="checks" type="selection"></el-table-column>
          <el-table-column prop="number" label="供应商编码"></el-table-column>
          <el-table-column prop="name" label="供应商名称"></el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="cancelSupplier">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择收货单 -->

    <el-dialog
      title="选择合同"
      :visible.sync="choseModel"
      width="45%"
      height="100%"
      label-width="100px"
      label-position="right"
    >
      <el-form label-width="100px" label-position="left">
        <el-row>
          <div class="searchDialog-input">
            <el-form-item label="合同编码：">
              <el-input auto-complete="off" v-model="filter.contractCode" width="20%" size="mini" placeholder="请输入"></el-input>
            </el-form-item>

            <!-- <el-form-item label="收货店铺编码" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>-->
          </div>
        </el-row>
        <!-- <el-row>
          <div style="text-align:left">
            <el-form-item label="收货店铺名称" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>

          </div>
        </el-row>-->

        <div class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" :visible.sync="choseTable">
        <el-table-column prop="contractCode" label="合同编码"></el-table-column>
        <!-- <el-table-column prop="recivenumber" label="合同类型"></el-table-column> -->
        <el-table-column prop="ordertype" label="店铺名称"></el-table-column>
        <el-table-column prop="shopname" label="店铺编码"></el-table-column>
        <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
        <el-table-column prop="supplierCode" label="供应商编码"></el-table-column>
        <el-table-column prop="productbarno" label="商品编码"></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <!-- <el-table-column prop="shopname" label="主计量单位"></el-table-column> -->
        <el-table-column prop="productUnit" label="采购单位"></el-table-column>
        <el-table-column prop="transferRate" label="转换率"></el-table-column>
        <el-table-column prop="productSize" label="商品规格"></el-table-column>
        <el-table-column prop="originAmountWithTax" label="含税采购价"></el-table-column>
        <el-table-column prop="originTaxRate" label="进项税率"></el-table-column>
        <el-table-column prop="ordertype" label="流转途径"></el-table-column>
        <el-table-column prop="minNum" label="起订量"></el-table-column>
        <el-table-column prop="address" label="订货倍数"></el-table-column>
        <el-table-column prop="originTransportType" label="运输方式"></el-table-column>
        <el-table-column prop="originHasTransportPrice" label="是否含运费"></el-table-column>
        <!-- <el-table-column prop="create_time" label="库存组织进目录"></el-table-column>
        <el-table-column prop="create_time" label="库存量"></el-table-column>-->
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="addReturnOrder">新增退货单</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
export default {
  components: {
    CyTable,
    KtButton
  },
  data() {
    return {
      products: [],
      filter: { contractCode: null },
      choseModel: false,
      choseTableFlag: false,
      showSupplierModel: false,
      showSupplierTable: false,
      showModel: false,
      showTable: false,
      showModel1: false,
      showTable1: false,
      activeName: "activeName",
      tableData: [
        {
          order: "111"
        }
      ],
      //收货单
      choseTable: [
        {
          order: "",
          recivenumber: "",
          ordertype: "	",
          shopname: "	",
          address: "",
          su_no: "",
          su_name: "",
          create_time: ""
        }
      ],
      tableLog: [
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 22:55:56	",
          operating: "收货单入库	",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 22:00:02		",
          operating: "确认收货单",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 21:59:57		",
          operating: "更新收货单		",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 21:59:52	",
          operating: "创建收货单		",
          remark: ""
        }
      ],
      tableData: [
        {
          mpCode: "1910300000521981",
          mpName: "育学园补邮费专用链接1元（请联系客服后下单，勿自主拍下！）",
          mpBarcode: "",
          mpMeasureUnit: "",
          shoptype: "包包",
          shopBrand: "",
          mpMeasureUnit: "件",
          purchasenums: "1,000.0000",
          regularnums: "1,000.0000",
          unregularnums: "0.0000",
          correctedquantity: "",
          returnpurchase: "",
          untaxed: "0.909091",
          taxrate: "10.000000%",
          moneytype: "CNY",
          exchangerate: "1",
          purchaseprice: "1.000000	",
          untaxedamount: "909.091000",
          tax: "90.910000",
          amounttax: "1,000.000000",
          receiptmethod: "接受-入库",
          remark: "",
          warehousepurchase: "1,000.000000",
          purchaseno: "CG1910310002187947",
          purchasealone: "1910310002187969",
          asnno: "",
          asnline: "",
          contractnumber: "HT1909220000100067",
          contracttype: "代销合同	",
          attributes: "自采合同"
        }
      ],

      shopTable: [
        {
          checks: "",
          name: "张小二服饰",
          number: "jd_001	",
          shopname: "京东店	",
          type: "线上店铺"
        },
        {
          checks: "",
          name: "张小二服饰",
          number: "tm_001	",
          shopname: "育学园天猫旗舰店（正式）	",
          type: "线上店铺"
        },
        {
          checks: "",
          name: "张小二服饰",
          number: "400001	",
          shopname: "录屏店铺002	",
          type: "线上店铺"
        },
        {
          checks: "",
          name: "张小二服饰",
          number: "161616	",
          shopname: "张小二bbc店铺	",
          type: "线上店铺"
        }
      ],

      shopWarehouse: [
        {
          checks: "",
          number: "1702",
          name: "张小二门店仓	",
          address: "	"
        }
      ],
      //供应商
      supplierTable: [
        {
          checks: "",
          number: "1912240002546516",
          name: "12312312312313123	"
        },
        {
          checks: "",
          number: "1911290006883258",
          name: "对账人民币经销供应商	"
        },
        {
          checks: "",
          number: "1911290006873624",
          name: "对账美元经销供应商	"
        },
        {
          checks: "",
          number: "1911280009438561",
          name: "对账单供应商	"
        },
        {
          checks: "",
          number: "1911080000119790",
          name: "wuxiancai444	"
        }
      ]
      //
    };
  },
  methods: {
    print: function() {
      this.$message({ message: "打印成功", type: "success" });
    },
    //删除
    delOrder() {
      this.$message({ message: "删除成功", type: "success" });
    },
    //保存
    save() {
      this.$message({ message: "保存成功", type: "success" });
    },
    //提交
    saves() {
      // for (let obj in this.products) {
      //   if (obj.realRecievedNum < obj.returnNum) {
      //     this_.$message({
      //       message: "退货数量不能大于库存实际收货数量",
      //       type: "error"
      //     });
      //     return;
      //   }
      // }
      let this_ = this;
      let products = JSON.stringify(this.products);
      this.utils.request.returnOrderOperate({ products: products }, function(
        res
      ) {
        if (res.code == "0000") {
          this_.$message({ message: "更新库存成功", type: "success" });
          //刷新商品列表
        } else {
          this_.$message({
            message: "操作失败, " + res.msg,
            type: "error"
          });
        }
      });
    },
    //收货单table
    choseOrder: function() {
      this.choseModel = true;
      this.choseTable = true;
    },
    //店铺table
    showStore() {
      this.showModel = true;
      this.showTable = true;
    },
    //供应商
    showSupplier: function() {
      this.showSupplierModel = true;
      this.showSupplierTable = true;
    },
    //取消按钮
    cancels: function() {
      this.showModel = false;
      this.showTable = false;
    },
    //取消按钮
    cancels1: function() {
      this.showModel1 = false;
      this.showTable1 = false;
    },
    //取消按钮
    cancelSupplier: function() {
      this.showSupplierModel = false;
      this.showSupplierTable = false;
    },
    //取消按钮
    clearChose: function() {
      this.choseModel = false;
      this.choseTable = false;
    },
    checkNumber(row) {
      if (row.realRecievedNum < row.returnNum) {
        this.$message({
          message: "退货数量不能大于可退数量",
          type: "warning"
        });
      }
    },
    //新增退货单
    addReturnOrder(data) {
      let this_ = this;
      (this.proModel = false), (this.proTable = false);
      //判断合同内商品数据是否为空
      if (this.tableData.length > 0) {
        this.utils.request.addReturnOrder(
          { contractNo: this.tableData[0].contractCode },
          function(res) {
            if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
              this_.products = res.data;
              this_.choseModel = false;
              this_.choseTable = false;
            } else {
              this_.$message({
                message: "操作失败, " + res.msg,
                type: "error"
              });
              this_.choseModel = false;
              this_.choseTable = false;
            }
          }
        );
      } else {
        this.$message({
          message: "合同内商品数据不能为空！",
          type: "error"
        });
      }

      //根据信息生成对应的退货单 并更新商品的数量 同步库存
      this.choseModel = false;
      this.choseTable = false;
    },
    findPage() {
      if (this.filter.contractCode == null) {
        this.$message({
          message: "请输入合同编号！",
          type: "warning"
        });
        return;
      }
      let this_ = this;
      // this.$refs.CyTable.findPageStaticState(this.filters);
      this.utils.request.findPurchaseContractProduct(this.filter, function(
        res
      ) {
        this_.tableData = res.data;
        console.log(this_.proTables);
      });
    }
  }
};
</script>

<style scoped lang='scss'>
.el-row {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.mb20{
  margin-bottom: 20px;
}
</style>